<template>
  <div class="web_index absolute index-bj" >
    <div class="share">
      <img src="http://diandian.zgkpz.com/images/index/share.png" />
    </div>
    <div class="main">
      <div class="users">
        <div class="userInfo">
          <img  @click="user" src="http://diandian.zgkpz.com/images/m_index/touxiang.png" />
          <span>
            <p>井然</p>
            <p>10岁</p>
          </span>
        </div>
      </div>
      <div class="menu">
        <div>
          <img
            src="http://diandian.zgkpz.com/images/index/rank.png"
            class="menu_img"
            @click="rank"
          />
        </div>
        <div>
          <img
            src="http://diandian.zgkpz.com/images/index/huiben.png"
            class="menu_img"
            @click="huiben"
          />
        </div>
        <div>
          <img
            src="http://diandian.zgkpz.com/images/m_index/read.png"
            class="menu_img"
            @click="gendu"
          />
        </div>
        <div>
          <img
            src="http://diandian.zgkpz.com/images/index/learn.png"
            class="menu_img"
            @click="xuexi"
          />
        </div>
      </div>
    </div>

    <div class="index-one" @click="mfcb('魔法城堡')">
      
    </div>
    <div class="index-two" @click="mfcb('动物乐园')">
     
    </div>
    <div class="index-three" @click="mfcb('神奇树屋')">
      
    </div>
    <div class="index-four" @click="mfcb('盛林探险')">
     
    </div>

  </div>
</template>
<script>
export default {
  name: "Index",
  data: function () {
    return {};
  },
  created() {
    window.addEventListener("resize", this.handleResize);
  },
  mounted: function () {},
  methods: {
    //魔法城堡
    mfcb(e){
      alert(e)
    },
    handleResize() {
      if (document.body.clientWidth <= 768) {
        this.$router.replace({ path: "/" });
      }
    },
    rank() {
      this.$router.replace({ path: "/web/rank" });
    },
    huiben() {
      this.$router.replace({ path: "/web/main" });
    },
    gendu() {
      this.$router.replace({ path: "/web/rank" });
    },
    xuexi() {
      this.$router.replace({ path: "/web/log" });
    },
    user() {
      this.$router.replace({ path: "/web/user" });
    },
  },
};
</script>
<style scoped>

.index-bj{
  position: relative;
}
.index-one{
    position: absolute;
    top: 17%;
    left: 34%;
    width: 1rem;
    height: 1rem;
  
}

.index-two{
    position: absolute;
    top: 8%;
    left: 53%;
    width: 1rem;
    height: 0.8rem;
  
}
.index-three{
    position: absolute;
    top: 38%;
    left: 50%;
    width: 1rem;
    height: 0.8rem;
  
}

.index-four{
        position: absolute;
    top: 63%;
    left: 40%;
    width: 0.8rem;
    height: 0.8rem;
  
}




.main {
  position: fixed;
  bottom: 0;
  display: inline-flex;
  width: 100%;
  height: 100vh;
  background: url("http://diandian.zgkpz.com/images/m_index/white.png")
    no-repeat;
  background-size: 100% 100%;
  height: 0.5rem;
}
.main .users {
  width: 30%;
  color: #20644a;
  text-align: center;
  margin: auto;
}
.main .users img {
  width: 0.31rem;
  height: 0.31rem;
}
.userInfo {
  display: inline-flex;
  background: url("http://diandian.zgkpz.com/images/index/juxing.png") no-repeat;
  background-size: 100%100%;
  width: 0.8rem;
  height: 0.3rem;
  margin-top: 0.1rem;
}

.userInfo span {
  padding-top: 0.07rem;
  padding-left: 0.03rem;
}
.userInfo span p {
  font-size: .065rem;
  font-weight: 700;
}
.share img {
  width: 0.23rem;
  position: fixed;
  right: 5%;
  top: 34%;
}
.main .menu {
  width: 70%;
  display: flex;
  justify-content: space-around;
  margin: auto;
  padding-top: 0.1rem;
}
.main .menu_img {
  width: 0.3rem;
  height: 0.3rem;
}
.share {
  position: relative;
  top: 25%;
  right: 3%;
  float: right;
}

@media (max-width:1400px) {
  .index-one{
    position: absolute;
    top: 22%;
    left: 34%;
    width: 1rem;
    height: 1rem;
  
}

.index-two{
    position: absolute;
    top: 11%;
    left: 53%;
    width: 1rem;
    height: 0.8rem;
  
}
.index-three{
       position: absolute;
    top: 39%;
    left: 50%;
    width: 1rem;
    height: 1rem;
  
}

.index-four{
    top: 65%;
    left: 40%;
    width: 0.8rem;
    height: 0.8rem;
  
}

}

</style>
